<template>
    <div>
        <div id="box1">
            <div class="box1">
                <div class="flex box1_one">
                    <i class="el-icon-tickets"></i>
                    <div class="text">
                        <div>13455</div>
                        <div>歌单数据</div>
                    </div>
                </div>
                <div class="flex box1_one">
                    <i class="el-icon-mic"></i>
                    <div class="text">
                        <div>22340</div>
                        <div>歌手数据</div>
                    </div>
                </div>
                <div class="flex box1_one">
                    <i class="el-icon-service"></i>
                    <div class="text">
                        <div>234666</div>
                        <div>歌曲数据</div>
                    </div>
                </div>
                <div class="flex box1_one">
                    <i class="el-icon-user"></i>
                    <div class="text">
                        <div>5</div>
                        <div>用户总数</div>
                    </div>
                </div>
            </div>
            <div class="box1">
                <div class="flex box_two">
                    <div id="chart1" :style="{width: '93%', height: '420px'}">
                        <v-chart class="chart1" :option="option"/>
                    </div>
                </div>
            </div>
            <div class="box1">
                <div class="flex box_three">
                    <div id="chart2" :style="{width: '85%', height: '380px'}">
                        <v-chart class="chart" :option="option1"/>
                    </div>
                </div>
                <div class="flex box_three">
                    <div id="chart3" :style="{width: '85%', height: '380px'}">
                        <v-chart class="chart" :option="option3"/>
                    </div>
                </div>
            </div>
            <div class="box1">
                <div class="flex box_three">
                    <div id="chart4" :style="{width: '85%', height: '380px'}">
                        <v-chart class="chart" :option="option2"/>
                    </div>
                </div>
                <div class="flex box_three">
                    <div id="chart5" :style="{width: '85%', height: '380px'}">
                        <v-chart class="chart" :option="option4"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {use} from "echarts/core";
    import {CanvasRenderer} from "echarts/renderers";
    import {LineChart, BarChart, PieChart} from "echarts/charts";
    import {
        AxisPointerComponent,
        GridComponent,
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        ToolboxComponent,
    } from "echarts/components";
    import VChart, {THEME_KEY} from "vue-echarts";

    use([
        BarChart,
        LineChart,
        CanvasRenderer,
        PieChart,
        GridComponent,
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        ToolboxComponent,
        AxisPointerComponent,
    ]);
    export default {

        name: "Shuju",
        components: {
            VChart
        },
        provide: {
            [THEME_KEY]: "light"
        },
        data() {
            return {
                data1: [''],
                option: {
                    title: {
                        text: "用户增长趋势",
                        left: "left",
                    },
                    // 弹出框
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {  // 坐标轴指示器配置项。
                            type: 'line',
                            // line   直线指示器
                            //  'shadow' 阴影指示器
                        },
                        formatter: "{b} : {c} (人)"
                    },
                    toolbox: {
                        right: 10,
                        feature: {
                            dataView: { //数据视图
                                show: true
                            },
                            //保存图片
                            saveAsImage: {},
                            restore: { //重置
                                show: true
                            },
                            magicType: {//动态类型切换
                                type: ['bar', 'line']
                            }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ["12月18日", "12月19日", "12月20日", "12月21日", "12月22日", "12月23日", "12月24日"]

                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: "用户增长趋势",
                            type: "line",
                            data: [
                                {value: 0},
                                {value: 2},
                                {value: 6},
                                {value: 6},
                                {value: 7},
                                {value: 10},
                                {value: 5},
                            ],
                        }
                    ]
                },
                option1: {
                    title: {
                        text: "用户性别比例",
                        left: "left",
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: "horizontal",
                        left: "center",
                        data: [
                            "女",
                            "男"
                        ]
                    },
                    series: [
                        {
                            name: "用户性别比例",
                            type: "pie",
                            radius: "70%",
                            center: ["50%", "55%"],
                            data: [
                                {value: 1, name: "女"},
                                {value: 3, name: "男"}
                            ],
                            // 鼠标悬停
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        //自定义颜色
                                        var colorList = ['#87CEFA', '#7FFFAA'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }

                        }
                    ]
                },
                option2: {
                    title: {
                        text: "歌手性别比例",
                        left: "left",
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: "horizontal",
                        left: "center",
                        data: [
                            "女",
                            "男"
                        ]
                    },
                    series: [
                        {
                            name: "歌手性别比例",
                            type: "pie",
                            radius: "70%",
                            center: ["50%", "55%"],
                            data: [
                                {value: 9000, name: "女"},
                                {value: 13340, name: "男"}
                            ],
                            // 鼠标悬停
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        //自定义颜色
                                        let colorList = ['#FFB6C1', '#87CEFA'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }

                        }
                    ]
                },
                option3: {
                    color:['#F08080'],
                    title: {
                        text: "歌曲类型分布",
                        left: "left",
                    },
                    grid: {
                        left: '40',
                        right: '20',
                        bottom: '30',
                        top: '40',
                    },
                    tooltip: {
                        // 坐标轴触发弹出框
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none',   // 中间横线
                        },
                    },
                    legend: {
                        left:'center',
                        top: '1%',
                        data: [   // 图列内容
                            {
                                name: '总数',
                                icon: 'circle',
                                textStyle: {
                                    backgroundColor: '#fff'
                                }
                            }
                        ]
                    },
                    xAxis: {
                        type: 'category',
                        data: ['华语', '流行', '电子', '摇滚', '轻音乐', '民族'],
                        axisLabel: {//坐标轴标签
                            fontSize: 12,
                            fontWeight: 500,
                        }
                    },
                    yAxis: {
                        type : 'value',
                        axisLabel: {//坐标轴标签
                            textStyle: {
                                fontSize: 12,   //字体大小
                            },
                            formatter: function (value) {
                                if (value >= 10000 && value < 10000000) {
                                    value = value / 10000 + "万";
                                }
                                return value;
                            }
                        },
                        axisTick: 'none',  // 坐标轴刻度
                        axisLine: 'none',  // 轴线
                    },
                    // 内容数据
                    series: [{
                        name: '总数',
                        type: 'bar',
                        barWidth: 45,
                        // 图形文本标签
                        label: {
                            normal: {
                                show: true,
                                fontSize: 12,
                                fontWeight: '500',
                                color: '#cccccc',
                                position: 'top',
                            }
                        },
                        data: [105412, 55000, 87860, 40700, 22200, 6666],
                    }],
                },
                option4: {
                    color:['#40E0D0'],
                    title: {
                        text: "歌手国籍分布",
                        left: "left",
                    },
                    grid: {
                        left: '40',
                        right: '20',
                        bottom: '30',
                        top: '40',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none',   // 中间横线
                        },
                    },
                    legend: {
                        left:'center',
                        top: '1%',
                        data: [   // 图列内容
                            {
                                name: '总数',
                                icon: 'circle',
                            }
                        ]
                    },
                    xAxis: {
                        type: 'category',
                        data: ['中国', '欧美', '韩国', '日本', '其他'],
                        axisLabel: {//坐标轴标签
                            fontSize: 12,
                            fontWeight: 500,
                        }
                    },
                    yAxis: {
                        type : 'value',
                        axisLabel: {//坐标轴标签
                            textStyle: {
                                fontSize: 12,   //字体大小
                            },
                            formatter: function (value) {
                                if (value >= 10000 && value < 10000000) {
                                    value = value / 10000 + "万";
                                }
                                return value;
                            }
                        },
                        axisTick: 'none',  // 坐标轴刻度
                        axisLine: 'none',  // 轴线
                    },
                    // 内容数据
                    series: [{
                        name: '总数',
                        type: 'bar',
                        barWidth: 45,
                        // 图形文本标签
                        label: {
                            normal: {
                                show: true,
                                fontSize: 12,
                                fontWeight: '500',
                                color: '#cccccc',
                                position: 'top',
                            }
                        },
                        data: [14000, 11000, 7000, 5700, 8000],
                    }],
                }
            }
        }
    }
</script>

<style scoped>
    .box1 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .flex {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.17), 0 6px 20px 0 rgba(0, 0, 0, 0.13);
    }

    .box1 .box1_one {
        background-color: white;
        width: 20%;
        height: 150px;
    }

    .box1 .box_two {
        background-color: white;
        width: 95%;
        height: 450px;
    }

    .box1 .box_three {
        background-color: white;
        width: 45%;
        height: 400px;
    }

    .box1_one i {
        font-size: 40px;
        background-color: #cccccc;
        border-radius: 50%;
        margin-right: 60px;
        padding: 10px;
    }

    .box1_one .text {
        text-align: center;
    }

    .box1_one .text div:first-child {
        font-weight: bolder;
        font-size: 2em;
    }

    .box1_one .text div:nth-child(2) {
        color: #bbbbbb;
    }

    .chart1 {
        width: 100%;
    }
</style>